<template>
	<view class="wrapper">
	  <!-- 个人资料 -->
	  <view class="profile">
		<view class="meta">
		  <!-- <image class="avatar" src="http://static.botue.com/ugo/uploads/monkey.png"></image> -->
		  <open-data class="avatar" type="userAvatarUrl"></open-data>
		  <!-- <text class="nickname">孙悟空</text> -->
		  <open-data class="nickname" type="userNickName"></open-data>
		</view>
	  </view>
	  <!-- 统计 -->
	  <view class="count">
		<view class="cell"> 8.00 <text>当月总充值</text> </view>
		<view class="cell"> 14.00 <text>当月总消费</text> </view>
		<!-- <view class="cell"> 18 <text>关注的商品</text> </view>
		<view class="cell"> 84 <text>我的足迹</text> </view> -->
	  </view>
	  <!-- 我的订单 -->
	  <!-- <view class="orders">
		<view class="title">我的订单</view>
		<view class="sorts">
		  <text class="icon-bill">待付款</text>
		  <text class="icon-car">待收货</text>
		  <text class="icon-money">退款/退货</text>
		  <text class="icon-list">全部订单</text>
		</view>
	  </view> -->
	  <!-- 积分记录 -->
	  <navigator url="/pages/pointsRecord/pointsRecord">
	  <view class="address icon-arrow">
		<span>积分记录</span>
		<view class="arrow_right" />
	  </view>
	</navigator>
	  <view class="address icon-arrow">
		联系客服
		<view class="arrow_right" />
	  </view>
	  <navigator url="/pages/memberSearch/memberSearch">
	  <view class="address icon-arrow">
		会员管理
		<view class="arrow_right" />
	  </view>
	</navigator>
	<navigator url="/pages/contactMember/contactMember">
	  <view class="address icon-arrow">
		客服管理
		<view class="arrow_right" />
	  </view>
	</navigator>
	  <!-- 其它 -->
	  <!-- <view class="extra">
		<view @click="makePhone" class="item icon-arrow">会员管理</view>
		<button open-type="feedback" class="item icon-arrow"></button>
	  </view> -->
	</view>
  </template>
  
<script setup lang="ts">

 const makePhone=()=> {
		// 调用 API 拨打电话
		uni.makePhoneCall({
		  phoneNumber: "10086",
		});
	  }
  </script>
  
<style scoped lang="scss">
.wrapper {
	position: absolute;
	top: 0;
	bottom: 0;
  
	width: 100%;
	background-color: #f4f4f4;
  }
  
  .profile {
	height: 375rpx;
	background-color: #e4b247;
	display: flex;
	justify-content: center;
	align-items: center;
  
	.meta {
	  .avatar {
		display: block;
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		border: 2rpx solid #fff;
		overflow: hidden;
	  }
  
	  .nickname {
		display: block;
		text-align: center;
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #fff;
	  }
	}
  }
  
  .count {
	display: flex;
	margin: 0 20rpx;
	height: 100rpx;
	text-align: center;
	border-radius: 4rpx;
	background-color: #fff;
  
	position: relative;
	top: -27rpx;
  
	.cell {
	  flex: 1;
	  padding-top: 16rpx;
	  font-size: 27rpx;
	  color: #333;
	}
  
	text {
	  display: block;
	  font-size: 24rpx;
	}
  }
  
  .orders {
	margin: -17rpx 20rpx 0 20rpx;
	padding: 20rpx 0;
	background-color: #fff;
	border-radius: 4rpx;
  
	.title {
	  padding-left: 20rpx;
	  font-size: 30rpx;
	  color: #333;
	  padding-bottom: 20rpx;
	  border-bottom: 1rpx solid #eee;
	}
  
	.sorts {
	  padding-top: 30rpx;
	  text-align: center;
	  display: flex;
	}
  
	[class*="icon-"] {
	  flex: 1;
	  font-size: 24rpx;
  
	  &::before {
		display: block;
		font-size: 48rpx;
		margin-bottom: 8rpx;
		color: #ea4451;
	  }
	}
  }
  
  .address {
	line-height: 1;
	background-color: #fff;
	font-size: 35rpx;
	padding: 35rpx 0 35rpx 20rpx;
	margin: 10rpx 20rpx;
	color: #333;
	border-radius: 4rpx;
	margin: 5px 5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
  }
   .arrow_right{
 	width: 10px;
 	height: 10px;
 	border-top: 2px solid #999;
 	border-right: 2px solid #999;
 	transform: rotate(45deg);
	margin-right: 20px;
   }
  .extra {
	margin: 0 20rpx;
	background-color: #fff;
	border-radius: 4rpx;
  
	.item {
	  line-height: 1;
	  padding: 25rpx 0 25rpx 20rpx;
	  border-bottom: 1rpx solid #eee;
	  font-size: 30rpx;
	  color: #333;
	}
  
	button {
	  text-align: left;
	  background-color: #fff;
  
	  &::after {
		border: none;
		border-radius: 0;
	  }
	}
  }
  
  .icon-arrow {
	position: relative;
  
	&::before {
	  position: absolute;
	  top: 50%;
	  right: 20rpx;
	  transform: translateY(-50%);
	}
  }
  </style>
  